<template>
  <view class="game flex flex-col justify-center">
    <NavigationBar :navigation-title="bookName" />
    <image v-if="game" class="game-bg" :class="[game > 1 ? 'game-bg-small' : '']" :src="`https://app5.shuguostar.cn/imgs/images/game/bg${game}.png`" />

    <template v-for="item in gameList">
      <view v-if="round === item.thday" :key="item.id" class="btn-wrap flex items-center justify-center" :class="[`btn-${game}-${item.thday}`]" :style="{ 'z-index': tipBtn === item.thday ? 5 : 2 }">
        <image class="btn-bg" src="https://app5.shuguostar.cn/imgs/images/game/light_bg.png" />
        <view class="btn-ing" @click="handleClick(item)">
          <image class="avatar" :src="`https://app5.shuguostar.cn/imgs/images/home/${store.gender === 'X' ? `boy_${fullClose(1, 2)}` : `girl_${fullClose(1, 2)}`}.png`" />
          <view v-show="Number(item.thday).toString() === tipBtn && !isDemo" class="btn-text-bottom">
            {{ `完成第${item.startPgno}页到第${item.endPgno}页的阅读，即可来答题闯关啦` }}
          </view>
        </view>
      </view>

      <image v-if="item.thday < round" :key="item.id" class="btn" :class="[`btn-${game}-${item.thday}`]" :src="`https://app5.shuguostar.cn/imgs/images/game/btn${game % 2}_${item.thday}.png`" :style="{ 'z-index': (Number(item.thday) + 1).toString() === round ? 6 : 4 }" @click="handleClick(item)" />
      <view v-if="item.thday > round" :key="item.id" class="btn-default" :class="[`btn-${game}-${item.thday}`]" :style="{ 'z-index': (round === tipBtn && (Number(item.thday) - 1).toString() === round) ? 6 : tipBtn === item.thday ? 5 : (Number(item.thday) - 1).toString() === round ? 4 : 2 }" @click="handleClick(item)">
        <view v-show="tipBtn === item.thday && !isDemo" class="btn-text-bottom">
          {{ `完成第${item.startPgno}页到第${item.endPgno}页的阅读，即可来答题闯关啦` }}
        </view>
        <image class="btn-img" :class="[choodeBtn === item.thday ? 'shake' : '']" src="https://app5.shuguostar.cn/imgs/images/game/btn.png" />
      </view>
    </template>

    <image class="cloud-bg" src="https://app5.shuguostar.cn/imgs/images/game/cloud_bg.png" />
    <image class="back-btn" src="https://app5.shuguostar.cn/imgs/images/game/back_btn.png" @click="goBack" />
    <image class="ip-img" src="https://app5.shuguostar.cn/imgs/images/game/IP.png" />
  </view>
</template>

<script setup lang="ts">
import NavigationBar from '@/components/navigation-bar/index.vue';
import { getBookGame, getCheckGaming } from '@/api/read';
import type { GameResult } from '@/api/read/type';
import { fullClose } from '@/utils';
import { useUserStore } from '@/store';

const store = useUserStore();

const tipBtn = ref<string>('0');
const round = ref<string>('0');
const game = ref<number>(0);
const gameList = ref<Array<GameResult>>([]);
const getData = (courseId: string) => {
  getBookGame({ courseId }).then((res: { totalLevels: Array<GameResult> }) => {
    gameList.value = res.totalLevels;
    if (!game.value)
      game.value = res.totalLevels.length === 8 ? [1, 4, 6][fullClose(0, 2)] : [2, 3, 5][fullClose(0, 2)];

    let noDoList = res.totalLevels.filter((item: GameResult) => item.isDo === 'N');
    if (noDoList.length) {
      noDoList = noDoList.sort((a: GameResult, b: GameResult) => {
        const num: number = Number(a.thday) - Number(b.thday);
        if (num > 0)
          return 1;
        if (num < 0)
          return -1;
        return 0;
      });
      round.value = noDoList[0].thday;
    }
    else {
      round.value = res.totalLevels.length.toString();
    }

    nextTick(() => {
      uni.pageScrollTo({
        scrollTop: 2000000, // 滚动到页面的目标位置（单位px）
        duration: 0, // 滚动动画的时长，默认300ms，单位 ms
      });
    });
  });
};

// demo演示临时代码
const isDemo = ref<boolean>(false);
const bookName = ref<string>('');
const courseId = ref<string>('');
const acsId = ref<string>('');
onLoad((option: any) => {
  bookName.value = option.bookName;
  courseId.value = option.courseId;
  acsId.value = option.acsId;
  isDemo.value = Boolean(option.isDemo);
});

const getDemoData = () => {
  gameList.value = [];
  for (let i = 1; i <= 8; i++) {
    gameList.value.push({
      id: i.toString(),
      thday: i.toString(),
      courseId: '',
      startPgno: '',
      endPgno: '',
      isDo: '',
      newDate: '',
    });
  }

  if (!game.value)
    game.value = [1, 4, 6][fullClose(0, 2)];
  round.value = '4';
  tipBtn.value = round.value;

  nextTick(() => {
    uni.pageScrollTo({
      scrollTop: 2000000, // 滚动到页面的目标位置（单位px）
      duration: 0, // 滚动动画的时长，默认300ms，单位 ms
    });
  });
};

onShow(() => {
  if (isDemo.value) {
    getDemoData();
  }
  else {
    getData(courseId.value);
  }
});

const choodeBtn = ref<string>('0');
const handleClick = (item: GameResult) => {
  choodeBtn.value = item.thday;
  tipBtn.value = item.thday;
  setTimeout(() => {
    choodeBtn.value = '0';
  }, 1000);

  if (isDemo.value) {
    if (Number(item.thday) > 4)
      return;
    uni.navigateTo({
      url: `/pages/views/demo/level${item.thday}?thday=${item.thday}`,
    });
    return;
  }

  if (item.thday < round.value) {
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/views/answer/index?cdId=${item.id}&thday=${item.thday}&acsId=${acsId.value}`,
      });
    }, 300);
  }
  else if (item.thday === round.value) {
    getCheckGaming({ courseId: item.courseId, courseDetailId: item.id }).then((res: { ifOpen: string; [key: string]: any }) => {
      if (res.ifOpen === 'on') {
        uni.navigateTo({
          url: `/pages/views/answer/index?cdId=${item.id}&thday=${item.thday}&acsId=${acsId.value}`,
        });
      }
      else {
        uni.showToast({
          title: '请先完成读书任务',
          icon: 'none',
        });
      }
    });
  }
};

const goBack = () => {
  setTimeout(() => {
    uni.navigateBack();
  }, 300);
};

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.game {
  position: relative;
  width: 100%;

  .game-bg {
    width: 750rpx;
    height: 1960rpx;
  }

  .game-bg-small {
    width: 750rpx;
    height: 1770rpx;
  }

  .btn-wrap {
    position: absolute;
    width: 124rpx;
    height: 112rpx;
    z-index: 4;

    .btn-bg {
      position: absolute;
      top: -122rpx;
      left: -128rpx;
      width: 368rpx;
      height: 368rpx;
      animation: spin 6000ms linear infinite;
    }

    .btn-ing {
      position: relative;
      width: 112rpx;
      height: 112rpx;
      padding: 8rpx;
      border-radius: 50%;
      border: 8rpx solid #fff;
      background: #F97CA5;
      z-index: 3;

      &:active {
        transform: scale(0.9);
      }

      .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  .btn, .btn-default {
    position: absolute;
    width: 124rpx;
    height: 112rpx;
    z-index: 4;
  }

  .btn-default-top {
    z-index: 5;
  }

  .btn-img {
    position: absolute;
    width: 124rpx;
    height: 112rpx;
  }

  .btn-text-bottom {
    margin-top: 30rpx;
    position: absolute;
    top: 95rpx;
    left: -140rpx;
    width: 360rpx;
    padding: 16rpx;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #fff;
    border-radius: 12rpx;
    background: rgba(51,51,51,0.6);
    pointer-events: none;
    z-index: 999;

    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      top: -12rpx;
      left: 176rpx;
      border-left: 12rpx solid transparent;
      border-right: 12rpx solid transparent;
      border-bottom: 12rpx solid rgba(51,51,51,0.6);
    }
  }

  .btn:active {
      transform: scale(0.9);
    }

  .btn-1-1 {
    left: 144rpx;
    bottom: 300rpx;
  }

  .btn-1-2 {
    left: 414rpx;
    bottom: 438rpx;
  }

  .btn-1-3 {
    left: 234rpx;
    bottom: 598rpx;
  }

  .btn-1-4 {
    left: 142rpx;
    bottom: 762rpx;
  }

  .btn-1-5 {
    left: 252rpx;
    bottom: 950rpx;
  }

  .btn-1-6 {
    left: 372rpx;
    bottom: 1114rpx;
  }

  .btn-1-7 {
    left: 192rpx;
    bottom: 1266rpx;
  }

  .btn-1-8 {
    left: 238rpx;
    bottom: 1494rpx;
  }

  .btn-2-1 {
    left: 364rpx;
    bottom: 418rpx;
  }

  .btn-2-2 {
    left: 234rpx;
    bottom: 580rpx;
  }

  .btn-2-3 {
    left: 160rpx;
    bottom: 770rpx;
  }

  .btn-2-4 {
    left: 284rpx;
    bottom: 940rpx;
  }

  .btn-2-5 {
    left: 410rpx;
    bottom: 1100rpx;
  }

  .btn-2-6 {
    left: 268rpx;
    bottom: 1254rpx;
  }

  .btn-2-7 {
    left: 402rpx;
    bottom: 1460rpx;
  }

  .btn-3-1 {
    left: 336rpx;
    bottom: 318rpx;
  }

  .btn-3-2 {
    left: 312rpx;
    bottom: 578rpx;
  }

  .btn-3-3 {
    left: 226rpx;
    bottom: 774rpx;
  }

  .btn-3-4 {
    left: 348rpx;
    bottom: 930rpx;
  }

  .btn-3-5 {
    left: 462rpx;
    bottom: 1092rpx;
  }

  .btn-3-6 {
    left: 378rpx;
    bottom: 1278rpx;
  }

  .btn-3-7 {
    left: 340rpx;
    bottom: 1470rpx;
  }

  .btn-4-1 {
    left: 204rpx;
    bottom: 320rpx;
  }

  .btn-4-2 {
    left: 194rpx;
    bottom: 522rpx;
  }

  .btn-4-3 {
    left: 474rpx;
    bottom: 616rpx;
  }

  .btn-4-4 {
    left: 294rpx;
    bottom: 796rpx;
  }

  .btn-4-5 {
    left: 444rpx;
    bottom: 960rpx;
  }

  .btn-4-6 {
    left: 296rpx;
    bottom: 1122rpx;
  }

  .btn-4-7 {
    left: 214rpx;
    bottom: 1296rpx;
  }

  .btn-4-8 {
    left: 314rpx;
    bottom: 1456rpx;
  }

  .btn-5-1 {
    left: 364rpx;
    bottom: 396rpx;
  }

  .btn-5-2 {
    left: 234rpx;
    bottom: 558rpx;
  }

  .btn-5-3 {
    left: 160rpx;
    bottom: 748rpx;
  }

  .btn-5-4 {
    left: 284rpx;
    bottom: 918rpx;
  }

  .btn-5-5 {
    left: 410rpx;
    bottom: 1088rpx;
  }

  .btn-5-6 {
    left: 268rpx;
    bottom: 1232rpx;
  }

  .btn-5-7 {
    left: 402rpx;
    bottom: 1438rpx;
  }

  .btn-6-1 {
    left: 204rpx;
    bottom: 320rpx;
  }

  .btn-6-2 {
    left: 194rpx;
    bottom: 522rpx;
  }

  .btn-6-3 {
    left: 474rpx;
    bottom: 616rpx;
  }

  .btn-6-4 {
    left: 296rpx;
    bottom: 796rpx;
  }

  .btn-6-5 {
    left: 444rpx;
    bottom: 960rpx;
  }

  .btn-6-6 {
    left: 296rpx;
    bottom: 1122rpx;
  }

  .btn-6-7 {
    left: 214rpx;
    bottom: 1296rpx;
  }

  .btn-6-8 {
    left: 314rpx;
    bottom: 1436rpx;
  }

  .cloud-bg {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    width: 750rpx;
    height: 272rpx;
    z-index: 9;
  }

  .back-btn {
    position: fixed;
    left: 40rpx;
    bottom: 12rpx;
    width: 96rpx;
    height: 96rpx;
    z-index: 9;

    &:active {
      transform: scale(0.9);
    }
  }

  .ip-img {
    position: fixed;
    bottom: 16rpx;
    right: 40rpx;
    width: 240rpx;
    height: 328rpx;
    z-index: 9;
  }

  .shake {
    animation: shake 800ms ease-in-out;
  }
}

@keyframes shake { /* 水平抖动，核心代码 */
  10%, 90% { transform: translate3d(-2rpx, 0, 0); }
  20%, 80% { transform: translate3d(+4rpx, 0, 0); }
  30%, 70% { transform: translate3d(-8rpx, 0, 0); }
  40%, 60% { transform: translate3d(+8rpx, 0, 0); }
  50% { transform: translate3d(-8rpx, 0, 0); }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:deep(.navigation-bar-view) {
  background: #fff;
  color: #333;
}
</style>
